<template>
	<view class="body">
		<xk-header title="防疫入园列表"></xk-header>
		<view class="util-bar">
			<view class="top-white-box">

				<!--搜索框 start-->
				<view class="search-box">
					<u-search shape="square" placeholder="单号/申请人/申请人部门" height="42" :showAction="false" v-model="formdata.searchKey" @search="searchHandle"></u-search>
				</view>
				<!--搜索框 end-->

				<!--选项切换菜单 start-->
				<u-tabs
					 :current="tabIndex"
					 :list="tabs"
					 @click="clickTabs"
					 lineWidth="40"
					 lineColor="#f56c6c"
					 :activeStyle="{
						 color: '#000000',
						 fontWeight: 'bold',
						 transform: 'scale(1.15)'
					 }"
					 :inactiveStyle="{
						 color: '#303133',
						 transform: 'scale(1.15)'
					 }"
					 itemStyle="padding-left: 15px; padding-right: 15px;height:45px;width:25%;"
				 ></u-tabs>
				 <!--选项切换菜单 end-->
			</view>

			 <!--查询日期 start-->
			 <view class="select-search-btn">
				<u-row>
					<u-col span="4" offset="1">
						<view @click="showDate= true">
							<u--text suffixIcon="arrow-down-fill" size="16" bold iconStyle="font-size:15px;margin-left:2px;" :text="valueDate[tabIndex].date||'全部'"></u--text>
						</view>
						<u-datetime-picker
							:show="showDate"
							v-model="valuePickerDate"
							mode="year-month"
							@cancel="cancelDate"
							@confirm="confirmDate"
						></u-datetime-picker>
					</u-col>
					<u-col span="2"><view @click="resetSort()">重置</view></u-col>
				</u-row>
			 </view>
			 <!--查询日期 end-->
		 </view>

		 <!--列表start-->
		 <swiper :current="tabIndex" class="list-swiper list-swiper-other"
		 	@change="(e)=>{tabIndex = e.target.current;ticketApplyListInfo(true);}"
		 	:style="'height:' + scrollViewHeight + 'px'"
		 	>
		 	<swiper-item v-for="(tabItem, tabIndex) of tabs" :key="tabIndex">
		 		<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="{height: scrollViewHeight + 'px'}" @scrolltolower="bottom">
		 			<view v-if="tabItem.data.length > 0" class="list-info">
		 				<view v-for="(item,index) of tabItem.data" :key="item.id" class="data-list">
							<view class="title">申请单号：{{item.apply_no}}</view>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="3"><text class="grey-text">申请人：</text></u-col>
									<u-col span="9">{{item.apply_user}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="3"><text class="grey-text">所属公司：</text></u-col>
									<u-col span="9">{{item.company}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="3"><text class="grey-text">联系方式：</text></u-col>
									<u-col span="9">{{item.phone}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="3"><text class="grey-text">申请日期：</text></u-col>
									<u-col span="9">{{item.apply_date}}</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="3"><text class="grey-text">健康码：</text></u-col>
									<u-col span="9">
										<view v-if="item.jkcode">
											<image-list :pics="item.jkcode"></image-list>
										</view>
									</u-col>
								</u-row>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="3"><text class="grey-text">行程码：</text></u-col>
									<u-col span="9">
										<view v-if="item.xccode">
											<image-list :pics="item.xccode"></image-list>
										</view>
									</u-col>
								</u-row>
								
								<!-- <u-button type="primary" text="查看详情" style="width: 20%;margin-left: 280px;margin-bottom: 8px;" @click="ticketDetail(item)"></u-button> -->
								<view class="list-btn">
									<u-row customStyle="margin-bottom: 10px">
										<u-col span="12"><view class="yuyue" @click="ticketDetail" :data-id="item.park_id">查看详情</view></u-col>
										
										<!-- <u-col span="6" v-if="item.park_status == 10"><view class="detail" @click="submit(item)">提交</view></u-col> -->
										<!-- <u-col span="6" v-if="item.park_status == 20"><view class="detail">待受理</view></u-col> -->
										<!-- <u-col span="6" v-if="item.park_status == 10"><view class="detail" @click="modify(item)" style="color: #FAAC58;">修改</view></u-col> -->
										<!-- <u-col span="6" v-if="item.park_status == 30"><view class="detail" style="color: #01DF3A;">待登记</view></u-col>
										<u-col span="6"  v-if="item.park_status == 60"><view class="detail" style="color: #FF0040;">受理不通过</view></u-col>
										<u-col span="6" v-if="item.park_status == 40"><view class="detail" style="color: #949494;">已完成</view></u-col>
										<u-col span="6" v-if="item.park_status == 50"><view class="detail" style="color: #ff0000;">已取消</view></u-col> -->
									</u-row>
								</view>
							</view>
							<!-- <view :class="$util.getRights().pi_delist_apply?'loadText-1':'loadText-0'"><u-loadmore :status="loadmoreStatus" /></view> -->
		 			</view>
		 			<view class="empty-view" v-else>
		 					<u-empty mode="list" :icon="(imgUrl+'/wx/empty_data_icon.png')" text="哎呀，该界面暂无内容~"></u-empty>
		 			</view>
					<view style="height: 100px;"></view>
		 		</scroll-view>
		 	</swiper-item>
		 </swiper>
		 <!--列表 end-->
		<view class="common-bottom-view">
		 	<view @click="createFix" class="common-btn" style="padding: 0px	;">入园申请</view>
		 </view>
	</view>
</template>

<script>

import {formatImgPath} from '../../common/filter.js'

export default{
	data(){
		return{
			imgUrl:this.$config.BASE_imgUrl,
			show: false,
			formdata:{
				park_id:'',
				company:'',
				phone:'',
				highrisk:'',
				start_address:'',
				traffic_manner:'',
				plate_number:'',
				apply_park_date:'',
				park_reason:'',
				remark:'',
				jkcode:'',
				xccode:'',
				isSubmit:false
			},
			loadmoreStatus:'nomore',
			valuePickerDate:uni.$u.timeFormat(Number(new Date()), 'yyyy-mm'),
			showDate:false,
			valueDate: [{
				date:'',
			}, {
				date:'',
			}, {
				date:'',
			}, {
				date:'',
			}],
			formdata:{
				start:0,
				searchKey:'',
				dateMonth:'',
				spStatus:'',
			},
			scrollViewHeight: 0,
			disabled: true,
			triggered:false,
			invoicId:'',
			applyData:[],
			tabIndex:0,
			tabs: [{
						name: '申请中',
						index: 0,
						type: 'accept',
						startNum:0,
						isAll: false,
						data: [],
					},
					{
						name: '待办',
						index: 1,
						type: 'done',
						isAll: false,
						startNum:0,
						data: [],
					},
					{
						name: '待登记',
						index: 2,
						type: 'register',
						isAll: false,
						startNum:0,
						data: [],
					},
					{
						name: '已完成',
						index: 3,
						type: 'finish',
						isAll: false,
						startNum:0,
						data: [],
					}],
		}
	},
	onLoad() {

	},
	onShow(){
		this.refresh()
	},
	mounted(){
		this.$util.getHeightWithTopEl(".util-bar").then(height => {
			this.scrollViewHeight = height;
		});
	},
	onUnload(){
		uni.$off('refreshPatrolTask')
	},
	onReachBottom(){
	    // 触底的时候请求数据，即为上拉加载更多
	   this.ticketApplyListInfo()
	},
	methods:{
		//触底刷新
		bottom(){
			console.log('触发了上拉触底事件')
			this.ticketApplyListInfo()
		},
		submit(e){
			console.log("提交信息: ",e)
			this.formdata.park_id = e.park_id
			this.formdata.company = e.company
			this.formdata.phone = e.phone
			this.formdata.highrisk = e.highrisk
			this.formdata.start_address = e.start_address
			this.formdata.traffic_manner = e.traffic_manner
			this.formdata.plate_number = e.plate_number
			this.formdata.apply_park_date = e.apply_park_date
			this.formdata.jkcode = e.jkcode
			this.formdata.xccode = e.xccode
			this.formdata.park_reason = e.park_reason
			this.formdata.remark = e.remark
			this.formdata.isSubmit = true
			console.log("formdata:",this.formdata)
			this.$util.confirm({
				content: "确定提交开票申请？",
				confirmText: "确定"
			}).then(isConfirm => {
				if (isConfirm) {
					console.log("结果：",this.formdata)
					this.$util.post({
						url: "app/poPreventionPark/applyUpdate",
						data: this.formdata,
					}).then(res => {
						uni.redirectTo({
							url: '/pagesA/prevention-park/prevention-park-list'
						})
					})
		
				}
			})
		},
		
		ticketDetail(e){
			console.log("工单详情：",e)
			var park_id=e.currentTarget.dataset.id;
			uni.navigateTo({
				url: '/pagesA/prevention-park/prevention-park-detail?parkId=' + park_id
			})
		},
		async ticketApplyListInfo(flag,check){
			console.log("check:",check)
			console.log("1111111111111111111111111111111111111",this.tabIndex)
			let startNum = this.tabs[this.tabIndex].startNum;
			console.log("startNum:",startNum)
			if(flag === true && startNum != 0) {
				// this.stopRefresh()
				this.triggered = false;
				console.log('stop')
				return;
			}
			console.log("2222222222222222222222222222222222222")
			if(this.tabs[this.tabIndex].isAll) {
				this.stopRefresh()
				return; // 加载完成
			}
		
			console.log("33333333333333333333333333333333333333")
		
			//选项卡位置：0申请中1审批2完成
			var statusName='APPLYING';
			if(this.tabIndex==1){statusName='PENDING';}
			if(this.tabIndex==2){statusName='REGISTER';}
			if(this.tabIndex==3){statusName='COMPLETE';}
		
			//初始化查询条件
			let params = {
				start: startNum,
			}
			//搜索“单号/经办人/申请人单位”关键词
			if(this.formdata.searchKey){
				params.searchKey = this.formdata.searchKey
			}
			//加入筛选日期条件
			if (this.valueDate[this.tabIndex].date) {
				params.dateMonth = this.valueDate[this.tabIndex].date
			}
		
			let res=[];
			res = await this.$api.prevention_park_list(params,statusName)
			console.log("当前页总数据：",res)
			//选项卡位置：0申请中1审批2完成，返回获取数据。
			if(this.tabIndex===0){res = res.APPLYING}
			if(this.tabIndex== 1){res = res.PENDING}
			if(this.tabIndex== 2){res = res.REGISTER}
			if(this.tabIndex==3){res = res.COMPLETE}
			//返回数据，赋值到对应选项内容列表
			if(res.length == 0 && this.tabs[this.tabIndex].data.length == 0){
				this.stopRefresh()
				return
			}
		
			console.log('res',res)
			this.res = res
			//默认10条记录为一页
			if(res.length < 2){
				this.tabs[this.tabIndex].isAll = true
			}
			if(this.tabs[this.tabIndex].startNum == 0){
				this.tabs[this.tabIndex].data = res
			}else{
				this.tabs[this.tabIndex].data = this.tabs[this.tabIndex].data.concat(res)
			}
			this.tabs[this.tabIndex].startNum += 2
			this.stopRefresh();
		},
		clickTabs(item) {
		    console.log('item', item);
			this.tabIndex=item.index;
			// this.ticketApplyListInfo(true)
		},
		cancelDate(){
			this.showDate=false;
		},
		confirmDate(e){
			//console.log(uni.$u.timeFormat(new Date(e.value), 'yyyy-mm'));
			this.valueDate[this.tabIndex].date=uni.$u.timeFormat(new Date(e.value), 'yyyy-mm')
			//console.log(this.valueDate)
			this.showDate=false;
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false;
			}
			this.ticketApplyListInfo()
		},
		pullDownRefresh(){
			if(this.triggered){
				return;
			}
			this.triggered = true;
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false
			}
			console.log("下拉刷新：",this.tabs)
			this.ticketApplyListInfo(true)
		},
		refresh(){
			console.log("go")
			// this.tabs[this.tabIndex].data = '';
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false
				item.data = []
			}
			this.ticketApplyListInfo()
		},
		searchHandle(){
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false;
			}
			this.ticketApplyListInfo(true)
		},
		stopRefresh(){
			setTimeout(()=>{
				this.triggered = false;
				console.log('stop')
			}, 500)
		},
		resetSort() {
			if (this.valueDate[this.tabIndex].date) {
				this.valueDate[this.tabIndex].date = ""
				this.resetTab()
				this.ticketApplyListInfo()
			}
		},
		resetTab(){
			for(let item of this.tabs){
				item.startNum = 0;
				item.isAll = false;
				item.data = []
			}
		},
		createFix(){
			uni.navigateTo({
				url: '/pagesA/prevention-park/prevention-park-apply'
			})
		},
	},
}
</script>

<style lang="scss" scoped>

.list-swiper-other{
	background-color: #f7f7f7;
}
.body{
	background:#F8F8F8;
}
.top-white-box{
	background:#FFFFFF;
	margin-bottom:-2px;
}
.search-box{
	padding:10px 15px 10px 15px;
}
.select-search-btn{
	margin:15px 0px 10px 10px;
}
.data-list{
	background:#FFFFFF;
	padding:20px 10px 0px 10px;
	margin:10px;
	border-radius:5px;
	font-size:15px;
	.title{
		font-size:17px;
		font-weight:bold;
		color:#333333;
		margin-bottom:15px;
	}
	.grey-text{
		color:#999999;
	}
	.list-btn{
		text-align: center;
		border-top:1px solid #F5F5F5;
		height:52px;
		line-height:52px;
		color:#0055FE;
		font-size:17px;
		font-weight:bold;
	}
}
.loadText-0{
	padding:5px 0px 20px 0px;
}
.loadText-1{
	padding:5px 0px 110px 0px;
}
.detail{
	text-align:center;
	color:#000000;
}
.yuyue{
	text-align:center;
}
</style>
